import React, { useState, useEffect } from "react"
import "./AnswerDetail.css"
import { connect } from "react-redux"
import instance from "../../utils/instance"
import { getCookie } from "../../utils/cookie"
import Liker from "../Liker/Liker"
import CommentCard from "../CommentCard/CommentCard"

function AnswerDetail(props) {
    const [comment, setComment] = useState([])
    const [content, setContent] = useState("")
    const [commentActive, setCommentActive] = useState(false)
    const [commentSuccess, setCommentSuccess] = useState(false)
    useEffect(() => {
        let answerId = props.answer._id
        let questionId = props.questionId
        instance.get(`/questions/${questionId}/answers/${answerId}/comments`).then(data => {
            if (data.data.errno === 0) {
                let list = data.data.data
                setComment(list)
            }
        })
    }, [commentSuccess])
    const submitComment = (e) => {
        let answerId = props.answer._id
        let questionId = props.questionId
        let token = getCookie("token")
        instance.defaults.headers.common['Authorization'] = "Bearer " + token
        if (content !== "") {
            instance.post(`/questions/${questionId}/answers/${answerId}/comments`, {
                content
            }).then(data => {
                if (data.data.errno === 0) {
                    alert("评论成功!")
                    setCommentSuccess(true)
                } else {
                    alert("评论失败!")
                }
            }).catch(err => {
                alert("评论失败!")
            })
        }
    }
    const extendComment = (e) => {
        !commentActive ? setCommentActive(true) : setCommentActive(false)
    }
    return (
        <div className="answerDetail">
            <div className="answer_user">
                <img src={props.answer.answerer.avatar_url} alt="" />
                <p>{props.answer.answerer.username}</p>
            </div>
            <div className="answer_time">
                <p>{props.answer.updatedAt.split("T")[0]}更新</p>
            </div>
            <div className="answer_main_content">
                <p>{props.answer.content}</p>
            </div>
            <div className="answer_other_info">
                <Liker answer={props.answer} userId={props._id} />
                <div className="answer_comment">
                    <p onClick={(e) => { extendComment(e) }}><span className="iconfont iconxinxi"></span>{!commentActive ? `${comment.length}人已评论` : "收起评论"}</p>
                </div>
            </div>
            {
                commentActive && (<div className="user_comment">
                    {comment.length > 0 && (comment.map(item => {
                        return (<CommentCard comment={item} key={item._id} />)
                    }))}
                    <div className="put_comment">
                        <input type="text" placeholder="写下你的评论..." required onChange={(e) => { setContent(e.target.value) }} />
                        <input type="button" value="发布" onClick={(e) => { submitComment(e) }} />
                    </div>
                </div>)
            }
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        userInfo: state.home.userInfo
    }
}

export default connect(mapStateToProps, null)(AnswerDetail)